<template>
  <div class="my-collect">
<!--     <x-header 
      title="我的收藏"
      :left-options="{
        backText: '',
        preventGoBack: true
      }">
    </x-header> -->
    <div class="collect-list" v-if="hasResult">
      <div class="collect-item" v-for="(item, index) in collectList" @click="toGoodsInfo(item.goods_id)">
        <div class="cover">
          <img :src="item.goods_img" alt="">
        </div>
        <div class="item-right">
          <div class="name">{{item.goods_name}}</div>
          <div class="desc">
            <span class="price">￥{{item.price}}</span>
            <span class="volume">已售{{item.goods_sell_num}}</span>
          </div>
        </div>
      </div>
      <load :loadEvent="getCollectList"></load>
    </div>
    <no-result text="收藏" imgUrl="/static/images/no-collect.png" v-else></no-result>
  </div>
</template>

<script>
  import { XHeader } from 'vux'
  import axios from 'axios'
  import load from 'COMPS/load.vue'
  import noResult from 'COMPS/no-result.vue'

  export default {
    name: 'my-collect',
    components: {
      XHeader,
      load,
      noResult
    },
    data() {
      return {
        collectList: [],
        collectPage: 1,
        hasResult: true
      }
    },
    mounted() {
      this.getCollectList()
    },
    methods: {
      getCollectList() {
        let that = this;
        if (window.DEBUGGING) {
          return new Promise(function(resolve) {
            // resolve([{
            //   "comment_num": 0,
            //   "goods_name": "88",
            //   "formal_price": "50.00",
            //   "goods_cate": "58hrt",
            //   "goods_id": 8,
            //   "goods_sn": "SN_88",
            //   "goods_sell_num": 0,
            //   "collection_id": 1,
            //   "price": "88.00",
            //   "goods_type": "电池供应商",
            //   "describe": null,
            //   "stock": 65,
            //   "goods_img": "http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg"
            // },{
            //   "comment_num": 0,
            //   "goods_name": "恒喆紧密仪器",
            //   "formal_price": "50.00",
            //   "goods_cate": "58hrt",
            //   "goods_id": 8,
            //   "goods_sn": "SN_88",
            //   "goods_sell_num": 0,
            //   "collection_id": 1,
            //   "price": "88.00",
            //   "goods_type": "电池供应商",
            //   "describe": null,
            //   "stock": 65,
            //   "goods_img": "http://img0.imgtn.bdimg.com/it/u=1291035891,1817305185&fm=26&gp=0.jpg"
            // }])
            resolve([]);
          }).then(function(data){
            that.collectList = that.collectList.concat(data);
            if (that.collectList.length < 1) {
              that.hasResult = false
            }
          });
        }

        // todo: 获取收藏列表
        axios.get('/collection/list',{
          params: {
            page: that.collectPage
          }
        }).then(function(res){
          that.collectPage++;
          that.collectList = that.collectList.concat(res.data);
          if (that.collectList.length < 1) {
            that.hasResult = false
          }
        })
      },
      toGoodsInfo(id) {
        location.href = "/goodsInfo.html?id=" + id
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';
  .my-collect {
    .collect-list {
      padding: 0 16px;
      .collect-item {
        padding: 12px 0;
        height: 80px;
        border-top: 1px solid #eaeaea;
        &:nth-of-type(1) {
          border-top: none;
        }
        .cover {
          // display: inline-block;
          float: left;
          margin-right: 12px;
          overflow: hidden;
          >img {
            width: 80px;
            height: 80px;
          }
        }
        .item-right {
          vertical-align: top;
          position: relative;
          display: -webkit-box;
          height: 80px;
          .name {
            font-size: 15px;
            color: #333;
            .Mult-line(2);
          }
          .desc {
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 100%;
            .price {
              font-size: 15px;
              color: #ff3939;
            }
            .volume {
              float: right;
              font-size: 14px;
              color: #999;
            }
          }
        }
      }
    }
  }
</style>